<template>
  <div class="padding_10">
    <div class="grid_4_column">
      <!-- 预约日期 -->
      <div class="flex_y_center">
        <div class="title_txt">预约日期：</div>
        <el-date-picker
          v-model="filterForm.res_date"
          format="yyyy 年 MM 月 dd 日"
          placeholder="请选择预约日期"
          style="width: 70%"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </div>
      <!-- 客户姓名 -->
      <div class="flex_y_center">
        <div class="title_txt">用户姓名：</div>
        <el-input
          v-model="filterForm.member_name"
          placeholder="请输入用户姓名"
          style="width: 70%"
        />
      </div>
      <!-- 医生姓名 -->
      <div class="flex_y_center">
        <div class="title_txt">医生姓名：</div>
        <el-input
          v-model="filterForm.user_name"
          placeholder="请输入用户姓名"
          style="width: 70%"
        />
      </div>
      <!-- 状态 -->
      <!-- <div class="flex_y_center">
        <div class="title_txt">状态：</div>
        <el-select placeholder="请选择支付方式">
          <el-option label="已完成" value="" />
          <el-option label="未完成" value="wait" />
          <el-option label="退返" value="" />
        </el-select>
      </div> -->
      <!-- 开始日期 -->
      <div class="flex_y_center">
        <div class="title_txt">开始日期：</div>
        <el-date-picker
          v-model="filterForm.start_at"
          format="yyyy 年 MM 月 dd 日"
          placeholder="请选择开始日期"
          style="width: 70%"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </div>
      <!-- 结束日期 -->
      <div class="flex_y_center">
        <div class="title_txt">结束日期：</div>
        <el-date-picker
          v-model="filterForm.end_at"
          format="yyyy 年 MM 月 dd 日"
          placeholder="请选择结束日期"
          style="width: 70%"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </div>
    </div>
    <!-- 筛选，重置按钮 -->
    <div style="margin: 10px 0">
      <el-button
        icon="el-icon-search"
        :loading="filterLoad"
        type="primary"
        @click="getTherapy('filterLoad')"
      >
        筛选
      </el-button>
      <el-button icon="el-icon-refresh" :loading="resetLoad" @click="reset">
        重置
      </el-button>
    </div>

    <el-table :data="tableData" :empty-text="emptyText">
      <el-table-column label="用户" prop="member_name" />
      <el-table-column label="医生" prop="user_name" />
      <el-table-column label="日期" prop="created_at" />
      <el-table-column label="辅助治疗" prop="goods_name" />
      <el-table-column label="状态" prop="status_name" />
      <el-table-column label="总次数" prop="goods_qty" />
      <el-table-column label="完成次数" prop="goods_actual_qty" />
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            v-permissions="{ permission: ['view:TherapyService'] }"
            type="primary"
            @click="openDialog(scope.row, '详情')"
          >
            详情
          </el-button>
          <el-button
            v-show="scope.row.status == 'wait'"
            v-permissions="{ permission: ['complate:TherapyService'] }"
            type="primary"
            @click="openDialog(scope.row, '提示')"
          >
            完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialog">
      <div class="box">
        <!-- 用户/宝宝 -->
        <div class="flex_y_center">
          <div class="inp_title">用户/宝宝：</div>
          <div>{{ selInfo.member_name }}</div>
        </div>
        <div v-show="dialogTitle == '详情'" class="box">
          <!-- 开单医生 -->
          <div class="flex_y_center">
            <div class="inp_title">开单医生：</div>
            <div>{{ selInfo.user_name }}</div>
          </div>
          <!-- 开单时间 -->
          <div class="flex_y_center">
            <div class="inp_title">开单时间：</div>
            <div>{{ selInfo.created_at }}</div>
          </div>
        </div>
        <!-- 辅助治疗 -->
        <div class="flex_y_center">
          <div class="inp_title">辅助治疗：</div>
          <div>{{ selInfo.goods_name }}</div>
        </div>
        <!-- 总次数 -->
        <div class="flex_y_center">
          <div class="inp_title">总次数：</div>
          <div>{{ selInfo.goods_qty }}</div>
        </div>
        <!-- 完成次数 -->
        <div class="flex_y_center">
          <div class="inp_title">完成次数：</div>
          <div>{{ selInfo.goods_actual_qty }}</div>
        </div>
        <div v-show="dialogTitle == '详情'" class="box">
          <!-- 完成信息 -->
          <div>
            <div class="inp_title">完成信息：</div>
            <el-table :data="selInfo.finishData" style="margin-top: 10px">
              <el-table-column label="完成人员" />
              <el-table-column label="完成次数" />
              <el-table-column label="完成时间" />
            </el-table>
          </div>
          <!-- 退返信息 -->
          <!-- <div>
            <div class="inp_title">退返信息：</div>
            <el-table :data="selInfo.returnData" style="margin-top: 10px">
              <el-table-column label="退返人员" />
              <el-table-column label="退返次数" />
              <el-table-column label="退返原因" />
              <el-table-column label="退返时间" />
            </el-table>
          </div> -->
        </div>
        <!-- 完成次数输入 -->
        <div v-show="dialogTitle == '提示'" class="flex_y_center">
          <div class="inp_title">完成次数：</div>
          <el-input
            v-model.number="adjuvantForm.hint"
            :placeholder="'请输入完成次数' + selInfo.goods_qty"
            style="width: 40%"
            @input="detectInp"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button
          v-show="dialogTitle == '详情'"
          type="danger"
          @click="dialog = false"
        >
          关闭
        </el-button>
        <el-button
          v-show="dialogTitle == '提示'"
          type="primary"
          @click="setFrequency"
        >
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getTherapyList, setActualTherapy } from '@/api/therapy'

  export default {
    data() {
      return {
        // 辅助项目商品数据
        auxiliaryList: [],
        // 筛选搜索表单
        filterForm: {
          res_date: '', // 预约日期
          member_name: '', // 用户姓名
          user_name: '', // 医生姓名
          start_at: '', // 开始时间
          end_at: '', // 结束日期
        },
        filterLoad: false, // 筛选按钮搜索样式
        resetLoad: false, // 重置按钮样式
        emptyText: ' ',
        tableData: [],

        dialogTitle: '', // dialog标题
        dialog: false, // dialog显示隐藏
        selInfo: {},
        adjuvantForm: {
          hint: '',
        },
      }
    },
    watch: {
      dialog(newValue) {
        if (!newValue) {
          this.adjuvantForm.hint = ''
        }
      },
    },
    mounted() {
      this.getTherapy()
    },
    methods: {
      // 获取检验列表
      getTherapy(e) {
        this[e] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })

        getTherapyList(this.filterForm).then((res) => {
          this.tableData = res.data
          this[e] = false
          loading.close()
          this.emptyText = '暂无数据'
        })
      },
      // 重置搜索条件，重新导出列表
      reset() {
        for (let item in this.filterForm) {
          this.filterForm[item] = ''
        }
        this.getTherapy('resetLoad')
      },
      // 根据点击的按钮不同打开dialog
      openDialog(row, name) {
        this.dialogTitle = name
        this.dialog = true
        this.selInfo = row
      },
      // 检测输入是否大于总次数
      detectInp(e) {
        if (e > this.selInfo.goods_qty) {
          this.$message.error('当前输入值大于总次数，请重新输入')
          this.adjuvantForm.hint = ''
        }
      },
      // 设置实际完成数量
      setFrequency() {
        if (this.adjuvantForm.hint == '') this.$message.error('请输入完成次数')
        else {
          const data = this.adjuvantForm
          data.id = this.selInfo.id
          setActualTherapy(data).then(() => {
            this.dialog = false
            this.getTherapy()
          })
        }
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .box > div {
    margin-bottom: 15px;
  }
  .title_txt {
    width: 80px;
    text-align: right;
  }
</style>
